<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<div class="taskInfo">
						<div class="rightButton">
							<el-button size="small" type="primary" @click="editPart1()">{{buttonTxt1}}</el-button>
						</div>
						<el-form ref="form" :model="vender" label-width="150px">
							<div class="taskInfo">
								<el-row>
									<el-col :span="11">
										<el-form-item label="商户编号：">
											<span>{{vender.id}}</span>
										</el-form-item>
									</el-col>
									<el-col :span="11">
										<el-form-item label="商户名称：">
											<el-input v-model="vender.name" placeholder="请输入商户名称" v-show="isEditPart1"></el-input>
											<span v-show="!isEditPart1">{{vender.name}}</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
                  <el-col :span="11">
                    <el-form-item label="店铺地址：">
                      <el-input v-model="vender.shopAddress" placeholder="请输入店铺地址" v-show="isEditPart1"></el-input>
                      <span v-show="!isEditPart1">{{vender.shopAddress}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="入驻时间：">
                      <el-date-picker
                        v-model="vender.createTime"
                        type="datetime"
                        placeholder="选择入驻时间" v-show="isEditPart1">
                      </el-date-picker>
                      <span v-show="!isEditPart1">{{dateFormat(vender.createTime)}}</span>
                    </el-form-item>
                  </el-col>
								</el-row>
							</div>

							<div class="rightButton">
								<el-button size="small" type="primary" @click="editPart2()">{{buttonTxt2}}</el-button>
							</div>

							<div class="taskInfo">
								<el-form-item label="二维码：">
									<el-upload
									class="upload-demo"
									v-bind:action="uploadVenderUrl"
									:on-remove="handleRemove"
									:on-success="handleSuccess"
									:on-error="handleError"
									:limit="5"
									:file-list="fileListVender"
									list-type="picture">
										<el-button size="small" type="primary" v-show="isEditPart2">点击上传</el-button>
									</el-upload>
								</el-form-item>

								<el-form-item label="公众号地址：">
									<el-input type="textarea" v-model="vender.accountAddress" placeholder="请输入公众号地址"  v-show="isEditPart2"></el-input>
									<span v-show="!isEditPart2">
										{{vender.accountAddress}}
									</span>
								</el-form-item>

							</div>

							<el-form-item>
								<el-button @click="reback()">返回</el-button>
							</el-form-item>
						</el-form>
					</div>

				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../Navigation'
	import BreadCrumb from '../BreadCrumb'
	// 配置API接口地址
	import config from "../../config.json"
	const Root = config.API_HOST;
	export default{
		name:'VenderDetail',
		methods: {
			dateFormat(time) {
				if(time==null){
					return null;
				}
				var date=new Date(time);
				var year=date.getFullYear();
				/* 在日期格式中，月份是从0开始的，因此要加0
				* 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				* */
				var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
				var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
				var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
				var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
				var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
				// 拼接
				return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
			},
			editPart1(){
				if(this.isEditPart1){
					this.saveWare();
					this.isEditPart1 = false;
					this.buttonTxt1 = "修改";
				} else{
					this.isEditPart1 = true;
					this.buttonTxt1 = "保存";
				}
			},
			editPart2(){
				if(this.isEditPart2){
					this.saveWare();
					this.isEditPart2 = false;
					this.buttonTxt2 = "修改";
				} else{
					this.isEditPart2 = true;
					this.buttonTxt2 = "保存";
				}
			},
			handleSuccess(response, file, fileList){
				if(response.flag=="success"){
					this.vender.venderImages.push(response.data.id);
				}
			},
			handleRemove(file,fileList){
				var temp = file.id==undefined?file.response.data.id:file.id;
				for(var i=0;i<this.vender.venderImages.length;i++){
					if(this.vender.venderImages[i]==temp){
						this.vender.venderImages.splice(i,1);
						break;
					}
				}
			},
			handleError(){
				this.$message.error('上传图片失败');
			},
			reback(){
				this.$router.push('/vender/list');
			},
      //保存修改方法
			saveWare(){
				var that = this;
				this.$api.post('/vender/update',that.vender,function(data){
					if(data.flag=="success"){
						that.$message({
							message: "保存成功",
							type: 'success'
						});
					} else{
						that.$message.error(data.msg);
					}
				});
			},
      //初始化请求加载图片
			loadImageByType(vId){
				var that = this;
				this.$api.get('/vender/image/'+vId,null,function(data){
					if(data.flag=="success"){
						for(var i=0;i<data.data.length;i++){
							that.vender.venderImages.push(data.data[i].id);
              that.fileListVender.push({
                "url":data.data[i].wxCode,
                "id":data.data[i].id,
                "name":data.data[i].name
              })
						}
					} else{
						that.$message.error(data.msg);
					}
				});
			}
		},
		mounted(){
			var that = this;
			this.$api.get('/vender/get/'+that.$route.params.id,null,function(data){
			  console.log(data);
				if(data.flag=="success"){
					that.vender = data.data;
					that.vender.venderImages = [];
					that.loadImageByType(data.data.id);
				} else{
					this.$message.error(data.msg);
				}
			});
		},
		data:function(){
			return {
				uploadVenderUrl:Root+"/vender/image/upload",
				isEditPart1:false,
				isEditPart2:false,
				buttonTxt1:"修改",
				buttonTxt2:"修改",
				fileListVender:[],
				navs:["商户数据管理","商户列表","商户详情"],
				vender:{
					name:"",
          accountAddress:"",
          shopAddress:"",
          wxCode:"",
					createTime:"",
					venderImages:[]
				}
			}
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>
	.taskInfo{
		padding: 20px;
		border: 1px solid #dddddd;
		margin-bottom: 20px;
	}
	#changePercent{
		width: 110px !important;
	}
	.rightButton{
		text-align: right;
		margin-bottom: 10px;
	}
</style>
